<script setup lang="ts">
import { ref } from "vue";
import { useTaskList } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useI18n } from "vue-i18n";
import Search from "@iconify-icons/ep/search";
import Refresh from "@iconify-icons/ep/refresh";
import {hasPerms} from "@/utils/auth";

const { t } = useI18n();

defineOptions({
  name: "TaskList"
});

const formRef = ref();
const tableRef = ref();
const {
  form,
  loading,
  columns,
  dataList,
  selectedNum,
  pagination,
  statistics,
  followerList,
  resetForm,
  onSearch,
  handleComplete,
  handleDelete,
  handleBatchDelete,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  onSelectionCancel,
  viewCustomerDetail,
  viewTaskDetail
} = useTaskList(tableRef);

function onFullscreen() {
  tableRef.value.setAdaptive();
}

const size = ref<"default" | "large" | "small">("small");
</script>

<template>
  <div class="main">
    <el-form 
      ref="formRef" 
      :inline="true" 
      :size="size" 
      :model="form" 
      class="search-form bg-bg_color w-[99/100] pl-4 pt-[12px] overflow-auto"
    >

      <el-form-item prop="follower_id">
        <el-select 
          v-model="form.follower_id" 
          placeholder="跟进人" 
          clearable 
          filterable
          style="width: 120px"
        >
          <el-option 
            v-for="item in followerList" 
            :key="item.id"
            :label="(item?.site_group?.[0] > 0 ? item?.sales_group : item.dept?.name) + '-' + item.username" 
            :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item prop="customer_name">
        <el-input 
          v-model="form.customer_name" 
          placeholder="客户关键字" 
          clearable 
          style="width: 150px"
          @keyup.enter="onSearch"
        />
      </el-form-item>

      

      <el-form-item prop="task_type">
        <el-input 
          v-model="form.task_type" 
          placeholder="任务类型" 
          clearable 
          style="width: 120px"
          @keyup.enter="onSearch"
        />
      </el-form-item>



      <el-form-item prop="priority">
        <el-select 
          v-model="form.priority" 
          placeholder="优先级" 
          clearable 
          style="width: 100px"
        >
          <el-option label="低" :value="1" />
          <el-option label="中" :value="2" />
          <el-option label="高" :value="3" />
          <el-option label="紧急" :value="4" />
        </el-select>
      </el-form-item>

      <el-form-item prop="deadline_date">
        <el-date-picker
          v-model="form.deadline_date"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 240px"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>

      <el-form-item>
        <el-button 
          type="primary" 
          :icon="useRenderIcon(Search)" 
          :loading="loading" 
          @click="onSearch"
        >
          {{ t("buttons.search") }}
        </el-button>
        <el-button 
          :icon="useRenderIcon(Refresh)" 
          @click="resetForm(formRef)" 
          style="margin-left:5px;"
        >
          {{ t("buttons.reset") }}
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar 
      title="我的任务" 
      :columns="columns" 
      :tableRef="tableRef?.getTableRef()"
      @refresh="onSearch" 
      @fullscreen="onFullscreen"
    >
      <template #title>
        <el-tabs 
          v-model="form.status" 
          class="bg-bg_color w-[99/100] pt-[1px] overflow-auto" 
          style="margin-top:-8px;" 
          @tab-click="onSearch"
        >
          <el-tab-pane 
            :label="`全部任务 (${statistics.total})`" 
            name=""
          />
          <el-tab-pane 
            :label="`待处理 (${statistics.pending})`" 
            name="0"
          />
          <el-tab-pane 
            :label="`已完成 (${statistics.completed})`" 
            name="1"
          />
          <el-tab-pane 
            :label="`超时完成 (${statistics.overtime})`" 
            name="2"
          />
          <div>
            <span v-if="selectedNum > 0" style="font-size: var(--el-font-size-base)" class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]">
              已选 {{ selectedNum }} 项
            </span>
            <el-button
              v-if="selectedNum > 0"
              type="primary"
              text
              @click="onSelectionCancel"
              style="margin-left: 10px;"
            >
              取消选择
            </el-button>
            <el-popconfirm
              v-if="selectedNum > 0 && hasPerms(['task:btn:delete'])"
              title="确认批量删除选中的任务吗？"
              @confirm="handleBatchDelete"
              :width="200"
            >
              <template #reference>
                <el-button
                  type="danger"
                  text
                  style="margin-left: 10px;"
                >
                  批量删除
                </el-button>
              </template>
            </el-popconfirm>
          </div>
        </el-tabs>
      </template>

      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          ref="tableRef"
          adaptive
          :adaptiveConfig="{ offsetBottom: 45 }"
          row-key="id"
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
          :loading="loading"
          :size="size"
          :data="dataList"
          :columns="dynamicColumns"
          :pagination="{ ...pagination, size }"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          :border="true"
          @selection-change="handleSelectionChange"
          @page-size-change="handleSizeChange"
          @page-current-change="handleCurrentChange"
        >
          <template #operation="{ row }">
            <el-button
              v-if="row.status === 0"
              class="reset-margin"
              link
              type="success"
              :size="size"
              :icon="useRenderIcon('ri:check-line')"
              @click="handleComplete(row)"
            >
              去处理
            </el-button>
            <el-button
              v-if="row.status === 1 || row.status === 2"
              class="reset-margin"
              link
              type="primary"
              :size="size"
              :icon="useRenderIcon('ri:file-text-line')"
              @click="viewTaskDetail(row)"
            >
              查看详情
            </el-button>
            <el-button
              class="reset-margin"
              link
              type="info"
              :size="size"
              :icon="useRenderIcon('ri:eye-line')"
              @click="viewCustomerDetail(row)"
            >
              查看客户
            </el-button>
            <!-- <el-popconfirm
              v-if="row.status !== 1 && row.status !== 2"
              :title="`确认删除任务「${row.title}」吗？`"
              @confirm="handleDelete(row)"
              :width="200"
            >
              <template #reference>
                <el-button
                  class="reset-margin"
                  link
                  type="danger"
                  :size="size"
                  :icon="useRenderIcon('ri:delete-bin-line')"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm> -->
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-table__inner-wrapper::before) { 
  height: 0;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 8px;
}

.main-content {
  margin: 18px 18px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 8px;
  }
}

:deep(.el-tabs__header) {
  margin: 0 0 8px;
}
</style> 